<template>
	<view class="parent-view">
		<view class="gd-select-view">
			<text :class="[selectIndex==1?'gd-select-item':'gd-unselect-item']" @click="selectClick" :data-index="1">1</text>
			<text :class="[selectIndex==10?'gd-select-item':'gd-unselect-item']" @click="selectClick" :data-index="10">10</text>
			<text :class="[selectIndex==30?'gd-select-item':'gd-unselect-item']" @click="selectClick" :data-index="30">30</text>
			<text :class="[selectIndex==50?'gd-select-item':'gd-unselect-item']" @click="selectClick" style="margin-bottom: 60rpx;"
			 :data-index="50">50</text>
			<text :class="[selectIndex==100?'gd-select-item':'gd-unselect-item']" @click="selectClick" style="margin-bottom: 60rpx;"
			 :data-index="100">100</text>
			<view :class="[selectIndex==-1?'gd-select-item':'gd-unselect-item']" @click="selectClick" style="margin-bottom: 60rpx;"
			 :data-index="-1">
				<text class="gd-select-item-txt" style="font-size: 36rpx;">其他金额</text>
				<!-- <image class="gd-select-item-icon"></image> -->
			</view>
			<view class="gd-price-view" v-if="selectIndex==-1">
				<text class="gd-price-txt">¥</text>
				<input class="gd-price-input" placeholder="请输入充值金额" type="digit" @input="priceInput" />
			</view>
			<view class="gd-price-line" v-if="selectIndex==-1" />
			<view class="gd-beizhu-view">
				<text class="gd-beizhu-txt">备注：</text>
				<input class="gd-beizhu-input" placeholder="请输入备注信息" type="text" @input="beizhuInput" />
			</view>
		</view>

		<view class="gd-pay-type-view">
			<view class="gd-pay-view">
				<image class="gd-pay-icon" style="height: 37rpx;" src="../static/icon_gdb_pay_wx.png"></image>
				<text class="gd-pay-txt">微信支付</text>
			</view>
		</view>

		<text class="gd-pay-btn" @click="payMoney">{{btnStr}}</text>

	</view>
</template>

<script>
	import request from '../../pages/index/request.js';
	export default {
		data() {
			return {
				selectIndex: 1,
				payType: "wechat",
				priceNumber: 0,
				beizhuStr: "",
				btnStr: "立即支付1元",
				treeid: "",
			}
		},
		methods: {
			onLoad: function(options) {
				this.treeid = options.treeid
			},
			onShow: function() {
				this.share.url = '../../pages/tabBar/home/index?appInviteId=' + this.appUtil.getAppInviteId()
				this.share.shareType = 1
			},
			priceInput: function(event) {
				this.priceNumber = event.target.value
				if(!this.priceNumber){
					this.priceNumber=0
				}
				this.btnStr = "立即支付" + this.priceNumber + "元"
			},
			beizhuInput: function(event) {
				this.beizhuStr = event.target.value
			},
			selectClick: function(item) {
				var index = item.currentTarget.dataset.index
				if (this.selectIndex == index) {
					return
				}
				this.selectIndex = index
				if (this.selectIndex == -1) {
					this.btnStr = "立即支付0元"
				} else {
					this.btnStr = "立即支付" + this.selectIndex + "元"
				}
			},
			payMoney: function() {
				var that = this
				var total;
				if (this.selectIndex == -1) {
					if (!this.priceNumber || this.priceNumber == 0) {
						uni.showToast({
							title: "请输入金额"
						})
						return
					}
					total = this.priceNumber
				} else {
					total = this.selectIndex
				}
				request.post("api/user/PrintingServePay", {
					type: "2",
					total: total,
					pay_type: "miniapp",
					treeid: this.treeid,
					openid:uni.getStorageSync("shiqin-user-openId")
				}).then(data => {
					wx.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						paySign: data.paySign,
						signType: data.signType,
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								mask: true,
								duration: 1000
							});
							uni.$emit("refrash-quality-list")
							uni.navigateBack()
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								mask: true,
								duration: 1000
							});
						}
					});
				})
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
